<style lang="scss" scoped>
  .li{
    border: 1px solid #0f3056;
    background-color: #091f2d;
    width: 740px;
    height: 639px;
    .top{
      padding: 0px 33px 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 102px;
      position: relative;
      &:before{
        content:'';
        display: block;
        position: absolute;
        left: 23px;
        top: 101px;
        width: 671px;
        height: 0px;
        border: 1px solid #40A0FC;
        opacity: 0.2;

      }
      .img{
        width: 44px;
        height: 44px;
        margin-right: 40px;
      }
      .title{
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3E9FCB;
        opacity: 1;
      }
      .block{
        position: absolute;
        right: 39px;
        top: 32px;
        /*width: 261px;*/
        /*height: 60px;*/
        .demonstration{
          display: none;
        }
      }
    }
    .flag{
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 0 30px;
      box-sizing: border-box;
      box-sizing: border-box;
      margin-bottom: 100px;
      .flag_l{
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #87ADE0;
        opacity: 1;
      }
      .flag_r{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .flag_r_1,.flag_r_3{
          display: flex;
          justify-content: center;
          align-items: center;
          .line{
            width: 16px;
            height: 0px;
            border: 1px solid #AFE2F9;
            opacity: 1;
            position: relative;
            &:before{
              content:'';
              display: block;
              position: absolute;
              left: 16px;
              top: -7px;
              width: 12px;
              height: 12px;
              border: 1.5px solid #AFE2F9;
              border-radius: 50%;
            }
            &:after{
              content:'';
              display: block;
              position: absolute;
              left: 30px;
              top: -1px;
              width: 15px;
              height: 0px;
              border: 1px solid #AFE2F9;
            }
          }
          .name{
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #AFE2F9;
            opacity: 1;
            margin-left: 36px;
            .mini{
              font-size:9px;
            }
          }
        }
        .flag_r_3{
          margin-left: 40px;
          .line{
            border: 1px solid #40A0FC;
            &:before{
              border: 1.5px solid #40A0FC;
            }
            &:after{
              border: 1px solid #40A0FC;
            }
          }
          .name{
            color: #40A0FC;
          }
        }
        .flag_r_2, .flag_r_4{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
          .line{
            width: 32px;
            height: 0px;
            border: 1px dashed #00D1E3;
            opacity: 1;
            position: relative;
          }
          .name{
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #00D1E3;
            opacity: 1;
            margin-left: 8px;
            .mini{
              font-size:9px;
            }
          }
        }
        .flag_r_4{
          .line{
            border: 1px solid #E3E3E3;
          }
          .name{
            color: #E3E3E3;
          }
        }
      }
    }
  }
</style>
<style lang="scss" >
  .lines_echarts_datepicker{
    .el-input__inner{
      /*width: 261px;*/
      /*height: 60px;*/
      background: #001A2E;
      border: 1px solid rgba(227, 227, 227, 0.25098039215686274);
      opacity: 1;
      border-radius: 4px;

    }
    input::-webkit-input-placeholder{
      color:#5f646f;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
      color:#5f646f;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
      color:#5f646f;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
      color:#5f646f;
    }


  }
</style>
<template>
  <div class="li">
    <div class="top">
      <img src="icons02/@2x/zhuangtaijiankong@2x.png" class="img">
      <span class="title">设备状态监控图</span>
      <div class="block">
        <el-date-picker
          class="lines_echarts_datepicker"
          v-model="value1"
          value-format="yyyy-MM-dd"
          @change="changeDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </div>
    <div class="flag">
      <div class="flag_l">
        （%/℃）
      </div>
      <div class="flag_r">
        <div class="flag_r_1">
          <div class="line"></div>
          <div class="name">湿度</div>
        </div>
        <div class="flag_r_2">
          <div class="line"></div>
          <div class="name">温度</div>
        </div>
        <div class="flag_r_4">
          <div class="line"></div>
          <div class="name">O<span class="mini">2</span></div>
        </div>
      </div>
    </div>
    <Linechartstrans :commonEchartsObj="countDeliverRecord"></Linechartstrans>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'
  import {listModularStatusDataByDay
  } from "@/api/device/perichart";
  import Linechartstrans from './linechartstrans.vue'
  export default {

    data() {
      return {
        value1: moment().format('YYYY-MM-DD'),
        countDeliverRecord: {
          echarts_name: `lines5`,
          line_list: [],
          line_date: [],
        },
      }
    },
    props: ['periViewRow'],
    mounted() {
      this.initData()

    },
    watch: {

    },
    components: {
      Linechartstrans
    },
    methods: {
      changeDate(v) {
        this.initData()
      },
      initData() {
        listModularStatusDataByDay({deviceId: this.periViewRow.id, createTime:this.value1})
//        listModularTemperatureDataByDay({deviceId: this.periViewRow.id, createTime:'2020-10-29'})
          .then(res => {
            let arr1 = [], arr2 = [], arr3=[];
            this.countDeliverRecord.line_date = [];
            (res.data.realHumidity || []).forEach(item => {
              this.countDeliverRecord.line_date.push(item.time)
              arr1.push(item.number)

            });
            (res.data.realTemperature || []).forEach(item => {
              arr2.push(item.number)
            });
            (res.data.realO2Content || []).forEach(item => {
              arr3.push(item.number)
            });
            var series = [
              {
                name: '湿度',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#AFE2F9',
                lineStyle: {
                  width: 0.5,
                  color: '#AFE2F9'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#AFE2F9',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#AFE2F9',
                    width: 3,
                    lineStyle: {
                      color: "#AFE2F9",
                      width: 1,
                    }
                  }
                },
                data: arr1
              },
              {
                name: '温度',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#00D1E3',
                lineStyle: {
                  color: '#00D1E3'
                },
                itemStyle: {
                  borderWidth: 1,
                  borderColor: '#00D1E3',
                  shadowBlur: 12,
                  shadowColor: '#00D1E3',
                  opacity:0,
                  normal: {
                    color: "#091f2d",
                    lineStyle: {
                      color: "#00D1E3",
                      width: 1,
                      type:'dotted'
                    },
                    borderWidth: 1,
                    borderColor: '#00D1E3',
                  }
                },
                data: arr2
              },
              {
                name: 'O2',
                type: 'line',
                showSymbol: true,
                symbol: 'none',
//                smooth:true,
                symbolSize: 6,
                colorClass: '#E3E3E3',
                lineStyle: {
                  width: 0.5,
                  color: '#E3E3E3'
                },
                itemStyle: {
                  shadowBlur: 12,
                  shadowColor: '#E3E3E3',
                  opacity:0.1,
                  normal: {
                    color: "#091f2d",
                    borderWidth: 1,
                    borderColor: '#E3E3E3',
                    width: 3,
                    lineStyle: {
                      color: "#E3E3E3",
                      width: 1,
                    }
                  }
                },
                data: arr3
              },
            ];
            this.$set(this.countDeliverRecord, 'line_list', series);
          })
      }

    },
    beforeDestroy() {

    }
  }
</script>
